<template>
  <view class="px-20rpx">
    <view
      v-for="(i, index) in fieldotions"
      :key="index"
      class="flex justify-between items-center item py-26rpx text-30rpx text-first"
    >
      <view>{{ i.label }}</view>
      <view class="text-second" v-if="i.field !== 'state'">
        {{ dataInfo[i.field] || '' }}
      </view>
      <view class="text-second" v-else>
        {{ stateMap[dataInfo[i.field]].label || '' }}
      </view>
    </view>
    <view
      v-if="dataInfo.state == 0"
      class="w-full px-20rpx fixed bottom-30rpx left-0 mt-72rpx"
    >
      <u-button
        color="#386ee8"
        :custom-style="{ borderRadius: '20rpx' }"
        :throttle-time="600"
        text="确认接警"
        :loading="btnLoading"
        @click="handleClickSubmit"
      />
    </view>
  </view>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

import { showToast } from '@/utils'

import { stateMap } from './const'
import { getAccodentDetailApi } from './service'
@Component({
  name: 'AccidentDetails'
})
export default class AccidentDetails extends Vue {
  btnLoading = false
  get stateMap() {
    return stateMap
  }
  fieldotions = [
    {
      field: 'police_receiver',
      label: '接警人姓名'
    },
    {
      field: 'name',
      label: '报警人姓名'
    },
    {
      field: 'idCard',
      label: '报警人身份证号'
    },
    {
      field: 'phone',
      label: '手机号'
    },
    {
      field: 'address',
      label: '地点'
    },
    {
      field: 'time',
      label: '报警时间'
    },
    {
      field: 'type',
      label: '事故类型'
    },
    {
      field: 'desc',
      label: '事故描述'
    },
    {
      field: 'state',
      label: '事故状态' //0待接警，1已接警，2已处理（结束）
    }
  ]
  onLoad() {
    this.getData()
  }
  dataInfo: Recordable = {}
  async getData() {
    const { data } = await getAccodentDetailApi(this.$mp.query.id)
    this.dataInfo = data[0]
  }
  async handleClickSubmit() {
    const db: any = wx.cloud.database()
    await db
      .collection('accidentde')
      .where({ _id: this.dataInfo._id })
      .update({
        data: {
          state: '1'
        }
      })
    showToast({
      title: '接警成功'
    })
    this.getData()
  }
}
</script>
<style scoped lang="scss">
.item {
  border-bottom: 1rpx solid #ccc;
  &:last-child {
    border-bottom: none;
  }
}
</style>
